<template>
    <div class="search">
        <div class="title search_top">
            <div class="ei">
                <el-icon>
                    <Search />
                </el-icon>
                <h3>筛选搜索</h3>
            </div>
            <div>
                <el-button @click="resettingFn">重置</el-button>
                <el-button type="primary" @click="onSearch">查询搜索</el-button>
            </div>
        </div>
        <div class="search_input">
            <p>活动名称:</p>
            <el-input type="text" placeholder="活动名称" v-model="name"></el-input>
        </div>
    </div>
    <div class="adddata">
        <div class="title">
            <el-icon>
                <Tickets />
            </el-icon>
            <h3>数据列表</h3>
        </div>

        <div>
            <el-button @click="jumpTimePeriod">秒杀时间段列表</el-button>
            <el-button @click="addActivity">添加活动</el-button>
        </div>
    </div>
    <div class="tables">
        <!-- 数据的展示 -->
        <el-table align="center" ref="multipleTableRef" :data="tableData" style="width: 100% ;" @selection-change="handleSelectionChange" :border="true">
            <el-table-column type="selection" width="60" />
            <el-table-column align="center" prop="id" label="编号" width="100" />
            <el-table-column align="center" prop="title" label="活动标题" width="650" />
            <el-table-column align="center" prop="" label="活动状态" width="140">
                <template #default="scope">
                    <div>
                        活动未开始
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="开始时间" width="140">
                <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
                <template #default="scope">
                    <div>
                        {{ scope.row.createTime ? dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <!-- 自定义列模板 -->
            <el-table-column align="center" prop="startDate" label="结束时间" width="140">
                <template #default="scope">
                    <div>
                        {{ scope.row.startDate ? dayjs(scope.row.startDate).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="上线/下线" width="200">
                <template #default="scope">
                    <el-switch @click="updateStatusFn(scope.row)" :value="scope.row.status === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180" flex="right">
                <template #default="scope">
                    <span @click="setupProducts(scope.row.id)">设置商品</span>
                    <span class="bianji" @click="onEdit(scope.row)">编辑</span>
                    <span @click="deleteFlashFn(scope.row.id)">删除</span>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <!-- 分页器 -->
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>
    <!-- 编辑组件 -->
    <Edit :visible="visible" :form="modalForm" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Edit>
</template>
  
<script setup lang="ts">
import { ref, reactive, unref } from 'vue'
import type { Ref } from 'vue'
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
// 处理时间格式
import dayjs from 'dayjs'
// 封装数据处理函数
import useTable from '../../hooks/useTables'
// 活动列表请求接口
import * as api from '../../request/api'
// 路由组件
import router from '../../router'
// 弹出框
import Edit from './components/Edit.vue'
// 数据约束
import { IFlashListItem,  } from '../../request/SmsAdminConreiller/index'

// 输入框内容 
const name = ref('')
// 弹出框状态
const visible = ref(false)

let add = false;   // false编辑 true 新增
let modalForm = ref({}) as Ref<IFlashListItem>

// 重置
let resettingFn = () => {
    name.value = ''
    getTableData()
}

// 添加活动
let addActivity = () => {
    let newUser = {
        id: 0,
        title: '',
        startDate: '',
        endDate: '',
        status: 1,
        createTime: ''
    } as IFlashListItem;
    modalForm.value = newUser;
    add = true;
    visible.value = true
}

// 点击 设置商品
let setupProducts = (id: number) => {
    // console.log("跳转到设置商品页");
    // 跳转到设置商品页
    router.push({
        path: '/sms/selectSession',
        query: {
            flashPromotionId: id
        }
    })
}

// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: IFlashListItem) => {
    // console.log(row);  // row就是表单数据
    // 二次 确认 
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求 去判断 是 编辑 还是添加
            if (add) {
                await api.flash.createFlashActivity(row)  // 新增
            } else {
                await api.flash.updateActivity(row) // 编辑
            }
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
// 修改上下线状态
let updateStatusFn = async (row: any) => {
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            console.log(row);
            let query = reactive({
                id: row.id,
                status: row.status == 1 ? 0 : 1
            })

            let newQuery = JSON.parse(JSON.stringify(query))
            await api.flash.updateStatus(newQuery)
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
        })
}

// 删除按钮
let deleteFlashFn = (id: number) => {
    // 二次 确认 
    ElMessageBox.confirm(
        '是否要删除该活动!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求删除
            await api.flash.deleteFlash(id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

// 编辑按钮
let onEdit = (row: IFlashListItem) => {
    add = false;
    modalForm.value = row
    // console.log(modalForm.value);
    visible.value = true

}
// 子级emit组件传过来的事件
let onCloseDialog = () => {
    visible.value = false
}


//数据请求展示
let { tableData, getTableData, pagination } = useTable(api.flash.getFlashList, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    keyword: name // name 是响应式的
})
getTableData()
// console.log(tableData);

//分页
const handleSizeChange = (val: number) => {
    getTableData()
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    console.log(`current page: ${val}`)
}
// 搜索
let onSearch = async () => {
    getTableData()
}
// 秒杀时间段跳转
let jumpTimePeriod = () => {
    router.push('/sms/flashSession')
}


// 全选
interface User {
    date: string
    name: string
    address: string
}

// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
</script>
  
<style lang="scss" scoped>
.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    flex-wrap: wrap;
    border: 1px solid #ebeef5;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin-top: 60px;
    margin-bottom: 20px;

    .search_top {
        width: 100%;
    }

    .search_input {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 40px;
        padding-top: 20px;

        .el-input {
            width: 200px;
            height: 32px;
            font-size: 14px;
            padding: 0 10px;
        }

        p {
            width: 87px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #606266;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
    }
}

.adddata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ei {
        display: flex;
        align-items: center;

        h3 {
            color: #303133;
            font-size: 14px;
            margin-left: 10px;
        }
    }

    h3 {
        color: #303133;
        font-size: 14px;
        margin-left: 10px;
    }
}

.tables {
    .pagination {
        margin: 20px 0;
        padding-right: 20px;
        float: right;
    }

    span {
        color: #409eff;
        cursor: pointer;
    }

    .bianji {
        margin: 0 5px;
    }

    .users {
        color: #409eff;
        font-size: 12px;

        &:hover {
            color: rgba(64, 158, 255, 0.7);
            cursor: pointer;
        }
    }
}
</style>
  